<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript">
	var xmlHttpRequest;//声明全局变量
	//创建对象 xmlHttpRequest
	function createXmlHttpRequest() {
		if (window.ActiveXObject)// 判断是否支持ActiveX控件
		{
			try {
				// 通过实例化ActiveXObject的一个新实例来创建XMLHTTPRequest对象
				xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {
				xmlHttpRequest = new ActiveXObject("Msxml12.XMLHTTP");
			}
			return xmlHttpRequest;
		} else if (window.XMLHttpRequest) //判断是否把XMLHTTPRequest实现为一个本地js对象
		{
			//创建XMLHTTPRequest的一个实例（本地javascript对象）
			return new XMLHttpRequest();
		}
	}
	function loadWeather() {
		//alert("fjmjulzl");
		document.getElementById("showWeather").style.display = "none";
		//1.创建xmlHttprequest对象
		xmlHttpRequest = createXmlHttpRequest();

		//2.设置回调函数
		xmlHttpRequest.onreadystatechange = isOK;//isOK为回调函数

		var cityName = encodeURI(encodeURI(document.getElementById("area").value));
		//3.初始化XMLHttpRequest  是否为异步
		var url = "${pageContext.request.contextPath}/UrlJsonServlet?cityName="
				+ cityName;
		//alert("url=" + url);		

		xmlHttpRequest.open("get", url, true);

		//4.发送请求 send("username = " + username +"&pwd=123456")
		xmlHttpRequest.send(null); //"d="+new Date().valueOf()
	}
	/*   //-- readyState 应答处理--//
	0 	未初始化	初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
	1	打开	open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。
	2	发送	Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
	3	接收中	所有响应头部都已经接收到。响应体开始接收但未完成。
	4	接收完成	HTTP 响应已经完全接收。
	 */
	function isOK() //回调函数
	{
		if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
			var areaJson = xmlHttpRequest.responseText;//返回的是bool类型
			if (areaJson == "notthiscity") {
				alert("搜索不到该城市，请输入正确的城市（如：福州）");
			} else {
				document.getElementById("showWeather").style.display = "block";
				var areaEvalJson = eval("(" + areaJson + ")");
				/* alert("城市："+areaEvalJson.weatherinfo.city);			
				alert("日期："+areaEvalJson.weatherinfo.date_y);			
				alert("星期："+areaEvalJson.weatherinfo.week);			
				alert("今日温度："+areaEvalJson.weatherinfo.temp1);			
				alert("天气："+areaEvalJson.weatherinfo.weather1);			
				alert("天气图片："+areaEvalJson.weatherinfo.img1);			
				alert("风度："+areaEvalJson.weatherinfo.wind1);			
				alert("友情提醒："+areaEvalJson.weatherinfo.index_d);			
				alert("天气："+areaEvalJson.weatherinfo.weather1);			
				alert ("紫外线强度："+areaEvalJson.weatherinfo.index_uv);			
				 */
				//document.getElementById("showWeather");
				document.getElementById("city").innerHTML = "城市："
						+ areaEvalJson.weatherinfo.city;
				document.getElementById("date").innerHTML = "日期："
						+ areaEvalJson.weatherinfo.date_y;

				document.getElementById("weather").innerHTML = "天气："
						+ areaEvalJson.weatherinfo.weather1;
				var img = document.createElement("img");

				if ("晴转多云" == areaEvalJson.weatherinfo.weather1) {
					img.src = "images/s_1.png";
				}
				if ("多云转晴" == areaEvalJson.weatherinfo.weather1) {
					img.src = "images/s_12.png";
				}
				if ("多云" == areaEvalJson.weatherinfo.weather1) {
					img.src = "images/s_2.png";
				}
				if ("晴" == areaEvalJson.weatherinfo.weather1) {
					img.src = "images/s_13.png";
				}
				if ("阵雪转多云" == areaEvalJson.weatherinfo.weather1) {
					img.src = "images/s_10.png";
				}
				//alert(img.src);
				document.getElementById("weather").appendChild(img);

				document.getElementById("weak").innerHTML = "星期："
						+ areaEvalJson.weatherinfo.week;
				document.getElementById("temp").innerHTML = "温度："
						+ areaEvalJson.weatherinfo.temp1;
				document.getElementById("wind").innerHTML = "风向强度："
						+ areaEvalJson.weatherinfo.wind1;
				document.getElementById("attention").innerHTML = "友情提醒："
						+ areaEvalJson.weatherinfo.index_d;
			}
		}
	}
	
function KeyUp() {
        if (event.keyCode == 13) {
            //event.keyCode = 9;
            document.getElementById("searchWeather").click();
            
            /* if (event.srcElement.id == "area") //如果最后一个焦点在验证码上
            {
            	//alert("gagag");
                //event.returnValue = false;
                //this.onblur();
                //document.getElementById("searchWeather").click(); //btnlogin :服务器按钮的id
            } */
        }
    } 
</script>

</head>

<body>
	<center>
		<input type="text" id="area" value="福州" name="area"onkeypress="return KeyUp()" />
		 <input id="searchWeather"type="button" onclick="loadWeather()" value="搜索">

		<div id="showWeather" align="left"
			style="width: 800px;height: 400px;border: solid 2px red;margin: 10px; padding: 30px; display: none;">
			<p id="city"></p>
			<p id="weather"></p>
			<p id="date"></p>
			<p id="weak"></p>
			<p id="temp"></p>
			<p id="wind"></p>
			<p id="attention"></p>
		</div>
	</center>
</body>
</html>
